<template>
  <div class="memories-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>
        <ClockCircleOutlined /> 回忆时光
        <small>珍藏美好时刻</small>
      </h1>
      <a-button type="primary" @click="showUploadModal">
        <template #icon><PlusOutlined /></template>
        添加回忆
      </a-button>
    </div>

    <!-- 照片墙/时间轴切换 -->
    <div class="view-switcher">
      <a-radio-group v-model:value="viewMode" button-style="solid">
        <a-radio-button value="gallery">
          <AppstoreOutlined /> 照片墙
        </a-radio-button>
        <a-radio-button value="timeline">
          <FieldTimeOutlined /> 时间轴
        </a-radio-button>
      </a-radio-group>
    </div>

    <!-- 内容区域 -->
    <div v-if="memories && memories.length > 0">
      <!-- 照片墙视图 -->
      <div v-show="viewMode === 'gallery'" class="gallery-view">
        <a-row :gutter="[16, 16]">
          <a-col
            v-for="memory in memories"
            :key="memory.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <div class="memory-card" @click="showMemoryDetail(memory)">
              <img :src="memory.image" :alt="memory.title">
              <div class="memory-info">
                <h3>{{ memory.title }}</h3>
                <p>{{ formatDate(memory.date) }}</p>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>

      <!-- 时间轴视图 -->
      <div v-show="viewMode === 'timeline'" class="timeline-view">
        <a-timeline mode="alternate">
          <a-timeline-item
            v-for="memory in sortedMemories"
            :key="memory.id"
            :color="memory.color"
          >
            <template #dot>
              <div class="timeline-dot" :style="{ background: memory.color }">
                {{ memory.icon }}
              </div>
            </template>
            <div class="timeline-card" @click="showMemoryDetail(memory)">
              <img :src="memory.image" :alt="memory.title">
              <div class="timeline-content">
                <h3>{{ memory.title }}</h3>
                <p>{{ memory.description }}</p>
                <div class="timeline-footer">
                  <span>{{ formatDate(memory.date) }}</span>
                  <a-tag :color="memory.color">{{ memory.tag }}</a-tag>
                </div>
              </div>
            </div>
          </a-timeline-item>
        </a-timeline>
      </div>
    </div>

    <!-- 空状态显示 -->
    <div v-else class="empty-container">
      <a-empty
        class="custom-empty"
        description="管理员正在斗争中，数据不久就到，请耐心等待一下~"
      />
    </div>

    <!-- 上传回忆模态框 -->
    <a-modal
        v-model:visible="uploadModalVisible"
        title="添加新回忆"
        @ok="handleUpload"
        :confirmLoading="uploading"
    >
      <a-form :model="newMemory" layout="vertical">
        <a-form-item label="标题" required>
          <a-input v-model:value="newMemory.title" placeholder="给这个回忆起个名字" />
        </a-form-item>

        <a-form-item label="日期" required>
          <a-date-picker
              v-model:value="newMemory.date"
              style="width: 100%"
              :disabledDate="disabledDate"
          />
        </a-form-item>

        <a-form-item label="描述">
          <a-textarea
              v-model:value="newMemory.description"
              :rows="4"
              placeholder="记录下这个瞬间..."
          />
        </a-form-item>

        <a-form-item label="标签">
          <a-select
              v-model:value="newMemory.tag"
              placeholder="选择一个标签"
              allow-clear
          >
            <a-select-option value="欢乐">欢乐</a-select-option>
            <a-select-option value="感动">感动</a-select-option>
            <a-select-option value="惊喜">惊喜</a-select-option>
            <a-select-option value="温馨">温馨</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="照片">
          <a-upload
              list-type="picture-card"
              :file-list="fileList"
              @preview="handlePreview"
              @change="handleChange"
          >
            <div v-if="fileList.length < 1">
              <PlusOutlined />
              <div style="margin-top: 8px">上传</div>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 回忆详情模态框 -->
    <a-modal
        v-model:visible="detailModalVisible"
        :footer="null"
        width="800px"
        class="memory-detail-modal"
    >
      <div class="memory-detail" v-if="selectedMemory">
        <img :src="selectedMemory.image" :alt="selectedMemory.title">
        <div class="detail-content">
          <h2>{{ selectedMemory.title }}</h2>
          <p class="detail-date">{{ formatDate(selectedMemory.date) }}</p>
          <p class="detail-description">{{ selectedMemory.description }}</p>
          <div class="detail-tags">
            <a-tag :color="selectedMemory.color">{{ selectedMemory.tag }}</a-tag>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  ClockCircleOutlined,
  AppstoreOutlined,
  FieldTimeOutlined,
  PlusOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'


// 视图模式
const viewMode = ref('gallery')

// 模拟数据
const memories = ref(null) // 初始值设为 null

// 按日期排序的回忆
const sortedMemories = computed(() => {
  return [...memories.value].sort((a, b) => new Date(b.date) - new Date(a.date))
})

// 上传相关
const uploadModalVisible = ref(false)
const uploading = ref(false)
const fileList = ref([])
const newMemory = ref({
  title: '',
  date: null,
  description: '',
  tag: ''
})

// 详情相关
const detailModalVisible = ref(false)
const selectedMemory = ref(null)

// 日期格式化
const formatDate = (date) => {
  return dayjs(date).format('YYYY年MM月DD日')
}

// 禁用未来日期
const disabledDate = (current) => {
  return current && current > dayjs().endOf('day')
}

// 显示上传模态框
const showUploadModal = () => {
  uploadModalVisible.value = true
  newMemory.value = {
    title: '',
    date: null,
    description: '',
    tag: ''
  }
  fileList.value = []
}

// 处理文件上传
const handleChange = ({ fileList: newFileList }) => {
  fileList.value = newFileList
}

// 处理文件预览
const handlePreview = async (file) => {
  // 实现预览逻辑
}

// 处理上传提交
const handleUpload = async () => {
  if (!newMemory.value.title || !newMemory.value.date || fileList.value.length === 0) {
    message.error('请填写必要信息')
    return
  }

  uploading.value = true
  try {
    // 模拟上传
    await new Promise(resolve => setTimeout(resolve, 1500))

    memories.value.unshift({
      id: Date.now(),
      ...newMemory.value,
      date: newMemory.value.date.format('YYYY-MM-DD'),
      image: URL.createObjectURL(fileList.value[0].originFileObj),
      color: '#ff6b81',
      icon: '🎉'
    })

    message.success('添加成功')
    uploadModalVisible.value = false
  } catch (error) {
    message.error('上传失败')
  } finally {
    uploading.value = false
  }
}

// 显示回忆详情
const showMemoryDetail = (memory) => {
  selectedMemory.value = memory
  detailModalVisible.value = true
}
</script>

<style scoped>
/* 整体容器样式优化 */
.memories-container {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(135deg, #fff5f6 0%, #fff 100%);
}

/* 页面标题样式优化 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(255, 107, 129, 0.1);
}

.page-header h1 {
  margin: 0;
  color: #ff6b81;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 28px;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.page-header small {
  font-size: 14px;
  color: #666;
  margin-left: 8px;
}

.view-switcher {
  margin-bottom: 24px;
  text-align: center;
}

/* 照片墙视图优化 */
.gallery-view {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.memory-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: white;
  height: 360px;
  display: flex;
  flex-direction: column;
}

.memory-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 24px rgba(255, 107, 129, 0.15);
}

.memory-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.4s ease;
  flex-shrink: 0;
}

.memory-info {
  position: relative;
  padding: 16px;
  background: white;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.memory-info h3 {
  margin: 0;
  color: #333;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.memory-info p {
  margin: 8px 0 0;
  color: #666;
  font-size: 12px;
}

/* 时间轴视图优化 */
.timeline-view {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px;
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

.timeline-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 3px solid white;
}

.timeline-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  max-width: 400px;
  margin: 0 auto;
  height: 320px;
  display: flex;
  flex-direction: column;
}

.timeline-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 24px rgba(255, 107, 129, 0.15);
}

.timeline-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  flex-shrink: 0;
}

.timeline-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.timeline-content h3 {
  margin: 0;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.timeline-content p {
  margin: 8px 0;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.timeline-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  color: #999;
  font-size: 12px;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 详情模态框样式优化 */
.memory-detail-modal {
  :deep(.ant-modal-content) {
    border-radius: 16px;
    overflow: hidden;
  }
}

.memory-detail {
  img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
}

.detail-content {
  padding: 0 24px;
  
  h2 {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
  }
}

.detail-date {
  color: #666;
  margin-bottom: 16px;
}

.detail-description {
  color: #333;
  line-height: 1.6;
}

.detail-tags {
  margin-top: 16px;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .memories-container {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .memory-card {
    height: 320px;
  }

  .memory-card img {
    height: 200px;
  }

  .timeline-view {
    padding: 16px;
  }

  .timeline-card {
    height: 300px;
  }

  .timeline-card {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 24px;
  }

  .memory-card {
    height: 300px;
  }

  .memory-card img {
    height: 180px;
  }
}

/* 添加空状态容器样式 */
.empty-container {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff5f6 0%, #fff 100%);
  border-radius: 16px;
  margin-top: 24px;
}

.custom-empty {
  padding: 40px;
}

.custom-empty :deep(.ant-empty-description) {
  color: #666;
  font-size: 16px;
}
</style>